<template>
  <el-card shadow="always" >
    <div class="titleLevel1" style="margin-left: 5px;">采购列表</div>
    <!-- 按钮行 -->
    <div>
      <el-row gutter="10">
        <!-- 输入框和搜索按钮列----------------------------------- -->
        <el-col :span="6">
          <div>
            <el-input
                v-model="input1"
                style="max-width: 600px"
                placeholder="单据编号"
            >
              <template #prepend>单据编号</template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="5">
          <div>
            <el-input
                v-model="input1"
                style="max-width: 600px"
                placeholder="商品名称"
            >
              <template #prepend>商品名称</template>
            </el-input>
          </div>
        </el-col>
        <el-col :span="5"> <div>
          <el-input
              v-model="input1"
              style="max-width: 300px"
              placeholder="审核状态"
          >
            <template #prepend>审核状态</template>
          </el-input>
        </div></el-col>
        <el-col :span="3"><el-button type="primary" :icon="Search">Search</el-button></el-col>
        <!-- 按钮列 ---------------------------->
        <el-button type="success" round>审核</el-button>
        <el-button type="danger" round>反审核</el-button>
        <el-col :span="4">

        </el-col>
      </el-row>
    </div>
    <!-- 表格行 --------------------------------------->

    <!-- 表格组件 -->
    <div class="table-flex">
      <el-table :data="tableData"
                style="min-height: 600px;max-height: 1000px"
                border
                :row-style="{height:'50px'}"
                :header-row-style="{height:'60px'}"
                scrollbar-always-on
                ref="controlAllSelect"

      >

        <el-table-column label="" width="50px" >
          <template #header>
            <input type="checkbox" v-model="allSelected" @change="handleAllSelect">
          </template>
          <template #default="{row}">
            <input type="checkbox" :value="row.wareId" v-model="selectedRowIds">
          </template>
        </el-table-column>
        <el-table-column prop="wareMark" label="审核状态" width="80"/>
        <el-table-column prop="wareName" label="供应商" width="100" />
        <el-table-column prop="wareCode" label="单据编号" width="180" />
        <el-table-column prop="wareCont" label="单据日期" width="200"/>
        <el-table-column prop="wareConttel" label="制单人" width="100"/>
        <el-table-column prop="wareAddress" label="数量" width="100"/>
        <el-table-column prop="wareMark" label="金额" width="180"/>
        <el-table-column fixed="right">
          <template #default="scope"  >
            <el-button-group>
              <el-button type="success" size="small" @click="edit(scope.row)">详情</el-button>
              <el-button type="danger" size="small" @click="del(scope.$index,scope.row)">删除</el-button>
            </el-button-group>
          </template>


        </el-table-column>
      </el-table>
    </div>
    <!-- 表格右侧空白列 -->
    <!--    底部翻页模块-->
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
          v-model:current-page="currentPage2"
          v-model:page-size="pageSize2"
          :page-sizes="[50, 100]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="sizes, prev, pager, next"
          :total="1000"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
    <!--底部翻页模块结束-->

  </el-card>
</template>

<script  setup>
import { ref,  } from 'vue';
import { Search } from '@element-plus/icons-vue';
import { ElButton,  ElCard, ElInput} from 'element-plus';
import { ElTable } from 'element-plus';

//分页
const currentPage2 = ref(5)
const pageSize2 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const handleSizeChange = (number) => {
  console.log(`${number} items per page`)
}
const handleCurrentChange = (number) => {
  console.log(`current page: ${number}`)
}
// 插入商品

//



// 编辑删除操作
const edit =(c)=>{
  console.log(c.prod_id)
  // router.push('/personal/post?id='+c.prod_id);
}

const del = (i,c)=>{
  console.log(i,c.prod_id)
  // if(confirm('您确认要删除此内容吗?')){
  //   axios.post('http://localhost:8080/v1/contents/'+c.prod_id+'/delete')
  //       .then((response)=>{
  //         if(response.data.code==2001){
  //           tableData.splice(i,1);
  //           ElMessage.success('删除内容成功!');
  //         }
  //       })
  // }
}
// 模拟表格数据
const tableData = [
  {
    wareId: '1',
    wareName: '仓库1',
    wareCode: 'CK10000',
    wareCont: '汪定鑫',
    wareConttel: '13998228012',
    wareAddress:'武汉',
    wareMark:'工作时间9-18点'
  },
  {
    wareId: '2',
    wareName: '天府仓库',
    wareCode: 'CK20000',
    wareCont: '刘阳河',
    wareConttel: '13999621431',
    wareAddress:'重庆',
    wareMark:'工作时间21-12点'
  }
]
// 选择模块
const selectRowIds = ref([]);
const allSelected =ref(false);
const handleAllSelect = ()=>{
  if (allSelected.value ==true){
    this.$refs.controlAllSelect.toggleAllSelection();
    selectRowIds.value= tableData.map(row => row.wareId);
  }else {
    this.$refs.controlAllSelect.clearSelection();
    selectRowIds.value = [];
  }
}

// 状态变量
const input1 = ref(''); // 输入框绑定的数据


</script>

<style scoped>
/*分页*/
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
/*样式*/
.button-container {
  display: flex;
  justify-content: right;
}
.page1row{
  margin: 20px;
}
.titleLevel1{
  font-weight: bold;
  margin-bottom: 25px;
  margin-left: 70px ;
}
</style>
